import React from "react"
// 导入加载内容的组件 
import { Spin, Alert } from 'antd';
// 导入fetch-jsonp
import fetchJSONP from "fetch-jsonp"
// 导入movieItem组件
import MovieItem from "@/subComponents/MovieItem.jsx"
// 导入分页组件
import { Pagination } from 'antd';
export default class MovieList extends React.Component{
    constructor(props){
        super(props)
        this.state={
            movies:[],
            nowPage:parseInt(props.match.params.page)||1,
            pageSize:12,
            total:0,  //表示当前电影下有多少数据，
            isLoading:true,   //数据是否加载，如果为true表示正在加载
            movieType:props.match.params.type  //保存获取电影的类型
        }
    }
    componentWillMount(){
        // 当使用fetch API获取数据的时候，第一个.then获取不到数据，拿到的是一个response对象
        // 我们可以调用response/json获取一个新的promise
        this.loadMovieListByTypeAndPage();
    }
    componentWillReceiveProps(nextProps){
        // 每当变换就重置参数
        this.setState({
            movieType:nextProps.match.params.type,
            isLoading:true,
            nowPage:parseInt(nextProps.match.params.page||1)
        },function(){
            this.loadMovieListByTypeAndPage();
        })
    }
    render(){
        return <div>
            {this.renderList()}
        </div>
    }
    // 根据电影的类型和页面获取数据
    loadMovieListByTypeAndPage=()=>{
        // 开始获取数据的索引 
        // const start=this.state.pageSize*(this.state.nowPage-1);
        // const url=`https://douban.uieee.com/v2/movie/${this.state.movieType}?start=${start}&count=${this.state.pageSize}`

        // // 注意：默认的window.fetch收到跨域的限制，我们用第三方包fetch-jsonp，和内置的fetch完全兼容
        // fetchJSONP(url).then(response=>response.json()) 
        //     .then(data=>{
        //     this.setState({
        //         // 将加载取消
        //         isLoading:false,
        //         // 为电影列表赋值
        //         movies:data.subjects,
        //         // 把总条数保存在state上
        //         total:data.total,
        //     })
        // })
        fetch(`./test_data/${this.state.movieType}.json`)
        .then(res => res.json())
        .then(data =>{ 
            this.setState({
            isLoading:false,
            movies:data.subjects,
            total:data.total 
            })
        })
    }
    
    renderList=()=>{
        if(this.state.isLoading){
            return<Spin tip="Loading...">
                <Alert
                    message="正在请求电影列表"
                    description="精彩内容马上呈现......"
                type="info" />
            </Spin>
        }else{
           return <div><div style={{display:'flex',flexWrap:'wrap'}}> 
               {this.state.movies.map(item=>{
                    return  <MovieItem {...item} key={item.id} history={this.props.history}></MovieItem>
               })}
           </div>
           <Pagination defaultCurrent={this.state.nowPage} pageSize={this.state.pageSize} total={this.state.total} onChange={this.pageChanged}/>
           </div>
        }
    }
    // 当页码改变的时候记载新的数据
    pageChanged=(page)=>{
        // 由于我们手动使用Bom对象，实现了跳转，这样不好，最好使用路由的方法进行编程导航
        // window.location.href='/#/movie/'+this.state.movieType+'/'+page
        this.props.history.push(`/movie/${this.state.movieType}/${page}`)
    }
}

//在react中，我们可以通过fetch API来获取数据，fetch API是基于promise封装的